<!--新闻中心-->
<template>
  <div class="news-center">
    <div class="banner"></div>
    <a-tabs default-active-key="1" style="padding: 0 16px;">
      <a-tab-pane v-for="list in tabsList" :key="list.key">
        <span slot="tab">
          <a-icon :type="list.icon" />
          {{ list.title }}
        </span>
        <a-list :loading="loading" :grid="{ gutter: 16, column: 4 }" :data-source="newsList">
          <a-list-item slot="renderItem" slot-scope="item">
            <a-card hoverable>
              <img
                slot="cover"
                alt="example"
                :src="item.img"
              />
              <template slot="actions" class="ant-card-actions">
                <a-icon key="edit" type="edit" @click="newsClick('edit')" />
                <a-icon key="delete" type="delete" @click="newsClick('del')" />
              </template>
              <a-card-meta :title="item.title" :description="item.time">
                <a-avatar
                  slot="avatar"
                  src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
                />
              </a-card-meta>
            </a-card>
          </a-list-item>
        </a-list>
      </a-tab-pane>
      <a-button
        type="primary"
        icon="plus"
        slot="tabBarExtraContent"
        @click="newsClick('add')"
        style="margin-right: 16px;">新闻发布</a-button>
    </a-tabs>

    <!-- 新闻操作弹出框 -->
    <a-modal
      :maskClosable="false"
      :title="modalTitle"
      v-model="dialogVisible"
      width="70%">
      <a-form
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 18 }"
        :form="form">
        <a-row>
          <a-col :span="12">
            <a-form-item label="新闻标题">
              <a-input v-decorator="[ 'IN_Title', {rules: [{ required: true, message: '请输入新闻标题!' }]} ]" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="来源地址">
              <a-input v-decorator="[ 'IN_Source', {rules: [{ required: true, message: '请输入来源地址!' }]} ]" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="作者">
              <a-input v-decorator="[ 'IN_Author', {rules: [{ required: true, message: '请输入作者名!' }]} ]" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="新闻类型">
              <a-select v-decorator="[ 'NT_TypeID', {rules: [{ required: true, message: '请选择新闻类型!' }]} ]">
                <a-select-option v-for="(item, index) in dictionary.NT_TypeID" :key="index" :value="item.DDL_ID">{{ item.DDL_Value }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="重要程度">
              <a-select v-decorator="[ 'IN_Import' ]">
                <a-select-option v-for="(item, index) in dictionary.IN_Import" :key="index" :value="item.DDL_ID">{{ item.DDL_Value }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item
              label="编辑框:"
              :label-col="{ span: 3 }"
              :wrapper-col="{ span: 21 }"
              style="margin-bottom: 0;">
              <quill-editor v-model="newsContent" ref="myQuillEditor" :options="editorOption">
              </quill-editor>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import { quillEditor, Quill } from 'vue-quill-editor'
import ImageResize from 'quill-image-resize-module'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Quill.register('modules/imageResize', ImageResize)
export default {
  name: '',
  components: {
    quillEditor
  },
  data () {
    return {
      newsContent: null,
      editorOption: {
        placeholder: '请输入正文...',
        modules: {
          imageResize: { // 放大缩小
            displaySize: true
          },
          toolbar: {
            container: [
              ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
              ['blockquote', 'code-block'], // 引用  代码块
              [{ header: 1 }, { header: 2 }], // 1、2 级标题
              [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
              [{ size: ['small', false, 'large', 'huge'] }], // 字体大小
              [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
              [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
              [{ align: [] }], // 对齐方式
              ['image'] // 图片
            ]
          }
        }
      },
      tabsList: [
        {
          title: '内部新闻',
          icon: 'skype',
          key: '1'
        },
        {
          title: '集团新闻',
          icon: 'weibo',
          key: '2'
        },
        {
          title: '区县档案局',
          icon: 'wechat',
          key: '3'
        },
        {
          title: '上海市档案局',
          icon: 'medium',
          key: '4'
        },
        {
          title: '国家档案局',
          icon: 'code-sandbox',
          key: '5'
        }
      ],
      newsList: [
        {
          img: 'https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png',
          title: '涉嫌强奸5岁女童嫌犯养母发声',
          time: '2020-09-02'
        },
        {
          img: 'https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png',
          title: '日本细菌战资源库向社会免费开放',
          time: '2020-09-02'
        },
        {
          img: 'https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png',
          title: '泰国国王恢复诗妮娜王室头衔',
          time: '2020-09-02'
        },
        {
          img: 'https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png',
          title: '沈腾公司名称',
          time: '2020-09-02'
        },
        {
          img: 'https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png',
          title: '上海3.3亿仿冒乐高案宣判',
          time: '2020-09-02'
        }
      ],
      loading: false,
      modalTitle: '', // 新闻弹框标题
      dialogVisible: false, // 新闻弹框默认不显示
      form: this.$form.createForm(this),
      dictionary: {
        NT_TypeID: [
          {
            DDL_ID: 1,
            DDL_Value: '内部新闻'
          },
          {
            DDL_ID: 2,
            DDL_Value: '集团新闻'
          }
        ],
        IN_Import: [
          {
            DDL_ID: 3,
            DDL_Value: '一般'
          },
          {
            DDL_ID: 4,
            DDL_Value: '重要'
          },
          {
            DDL_ID: 5,
            DDL_Value: '机密'
          }
        ]
      }
    }
  },
  created () {},
  mounted () {},
  methods: {
    newsClick (val) {
      switch (val) {
        case 'add':
          this.modalTitle = '新增新闻'
          this.dialogVisible = true
          this.form.resetFields() // 表单清空
          break
        case 'edit':
          this.modalTitle = '编辑新闻'
          this.dialogVisible = true
          break
        case 'del':
          var this_ = this
          this.$confirm({
            title: '提示',
            content: '此操作将永久删除该文件, 是否继续?',
            okText: '确认',
            cancelText: '取消',
            onOk () {
              this_.$message.success('删除成功')
            }
          })
          break
        default:
          break
      }
    }
  }
}
</script>
<style lang="less" scoped>
.news-center {
  width: 100%;
  min-height: 100%;
  background: #f5f7fa;
  .banner {
    height: 200px;
    background: url(../../assets/images/newsCenter.jpg) no-repeat center;
    background-size: 100% 100%;
  }
}
</style>
